<script>
/**
 * Recent activity component
 */
import journalModal from "@/components/journalModal";
export default {
  components: {
    journalModal
  },
  data() {
    return {
      activityData: [
        {
          icon: "ri-bar-chart-fill",
          date: "",
          time: "刚刚",
          title: "ERROR org.spiderflow.core.RequestExecutor - 请求出错,异常信息:{}"
        },
        {
          icon: "ri-calendar-2-fill",
          date: "",
          time: "1分钟前",
          title: "ERROR org.spiderflow.RequestExecutor - 请求出错,异常信息:null"
        },
        {
          icon: "ri-edit-2-fill",
          date: "",
          time: "2分钟前",
          title: "ERROR java.net.SocketTimeoutException: 连接超时"
        },
        {
          icon: "ri-user-2-fill",
          date: "",
          time: "3分钟前",
          title: "ERROR  o.s.core.ExecuteSQLExecutor - 数据源ID为空"
        },
        {
          icon: "ri-user-2-fill",
          date: "",
          time: "15分钟前",
          title: "ERROR java.lang.NullPointerException: 空指针异常"
        },
        {
          icon: "ri-user-2-fill",
          date: "",
          time: "30分钟前",
          title: "ERROR org.spiderflow.core.Spider - 抓取执行节点[执行SQL:19]出错,异常信息：{}"
        },
        {
          icon: "ri-user-2-fill",
          date: "",
          time: "40分钟前",
          title: "ERROR java.lang.IllegalArgumentException: URL地址无效"
        },
        {
          icon: "ri-user-2-fill",
          date: "",
          time: "1小时前",
          title: "ERROR org.spiderflow.core.Spider - 抓取执行节点[开始抓取:14]出错,异常信息：{}"
        }
      ]
    };
  },
  methods: {
    jump(){
      this.$router.push({
        path: '/log',
        query: {
          type: '采集异常'
        }
      })
    },
    logDetail(data){
      console.log(data);
      // this.showModal = true
      this.$refs.journalModal.open()
    },
  }
};
</script>

<template>
  <div class="card">
    <div class="card-body" >
      <div class="float-right">
        <span class="pointer">
          <i style="font-size: 18px;vertical-align: text-bottom;margin-right: 5px;" class="el-icon-refresh-right"></i>
        </span>
        
        <span class="pointer" @click="jump">
          <span>查看更多</span>
          <i style="font-size: 15px;vertical-align: bottom;" class="ri-arrow-right-s-line"></i>
        </span>
      </div>
      <h4 class="card-title mb-4" style="font-size: 17px;">
        <i style="font-size: 20px;vertical-align: sub;" class="ri-close-circle-line"></i>
        数据采集异常日志
      </h4>

      <div data-simplebar style="max-height: 236px;">
        <ul class="list-unstyled activity-wid">
          <li class="activity-list" v-for="(data, index) in activityData" :key="index">
            <div class="activity-icon avatar-xs">
              <span class="avatar-title bg-soft-primary text-primary rounded-circle">
                <i class="ri-user-2-fill"></i>
              </span>
            </div>
            <div class="pointer" @click="logDetail(data)">
              <div>
                <h5 class="font-size-13">
                  {{data.date}}
                  <small class="text-muted">{{data.time}}</small>
                </h5>
              </div>

              <div>
                <p class="text-muted mb-0">{{data.title}}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <journalModal ref="journalModal" />
  </div>
</template>